import md0 from "./markdown/webpack简介.md"
import md1 from "./markdown/webpack简核心概念.md"
import md2 from "./markdown/webpack配置.md"
import md3 from "./markdown/webpack打包html.md"
import md4 from "./markdown/webpack打包css.md"
import md5 from "./markdown/webpack打包js.md"
import md6 from "./markdown/webpack打包其他文件.md"
import md7 from "./markdown/webpack-dev-server.md"
import md8 from "./markdown/webpack实践.md"
import md9 from "./markdown/webpack进阶.md"
import md10 from "./markdown/webpackTreeShaking.md"
import md11 from "./markdown/webpack资源模块.md"
import $ from "jquery"
import hljs from "@highlightjs/cdn-assets/highlight.min.js" // 代码识别
import "@highlightjs/cdn-assets/styles/monokai-sublime.min.css" // 代码高亮
import 'bootstrap/dist/css/bootstrap.min.css'
import '../static/index.css'
var fileList = [
	md0,
	md1,
	md2,
	md3,
	md4,
	md5,
	md6,
	md7,
	md8,
	md9,
	md10,
	md11,
]
import {
	marked
} from "marked"

$(function() {
	var nameList = [
		"webpack简介",
		"webpack简核心概念",
		"webpack配置",
		"webpack打包html",
		"webpack打包css",
		"webpack打包js",
		"webpack打包其他文件",
		"webpack-dev-server",
		"webpack实践",
		"webpack进阶",
		"webpackTreeShaking",
		"webpack资源模块",
	]
	var index = 0
	// append() 
	function getFileByName() {
		$("#content").append(
			`<div  id="md${index}" class="card m-2 " ><h3 class=" alert alert-primary" role="alert">${nameList[index]}</h3><div  class="p-2">${fileList[index]}</div></div> `
		);
		index++;
		if (fileList[index]) {
			getFileByName(fileList[index])
		}
	}

	function renderTitle() {
		var str = ''
		for (var i = 0; i < nameList.length; i++) {
			str = str + `
				<div  class="list-group">
					<a  class="list-group-item" href="${'#md'+i}">
						${nameList[i]}
					</a>
				</div>
			`
		}
		$("#title").append(str)
	}


	getFileByName(0)
	renderTitle()
	hljs.highlightAll()
})
